<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./jquery.js"></script>
	<script src="./jquery.rangePicker.js"></script>
	<script>
	$(function(){
		// var _ele = $('<root><user id="1" name="test"/></root>');
		// alert(_ele.children().attr('id'))
		$('.bar').rangePicker();
	});
	</script>
	<style type="text/css">
	*{ padding: 0; margin: 0; }
	.think-rangepicker{ display: inline-block; margin: 120px; position: relative; line-height: 0; }
	.think-rangepicker .think-rangepicker-slider{ display: inline-block; width: 18px; height: 24px; border: 1px solid #ccc; position: absolute; left: 0; top: 0; margin-top: -6px; background-color: #fff; }
	.think-rangepicker .think-rangepicker-bar{ display: inline-block; width: 240px; height: 12px; border: 1px solid #ccc; background-color: #f1f1f1; }
	.think-rangepicker .think-rangepicker-progress{ display: inline-block; height: 12px; width: 0; background-color: #3399FF; }
	</style>
</head>
<body>
	<span class="bar"></span>
</body>
</html>